<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
       <style>
        .highlight {
            color: blue;
            font-weight: bold;
        }
        .q{
            width: 12%;
        }
    </style>
</head>
<body>
    <p id="a">肖朋友，学JS吗</p>
    <p id="a">肖朋友，学JS吗wrwrggsdgs</p>
    <span class="b">太简单，不学</span>
    <div id="c" class="q"></div>
    
    <p id="aa">4</p>
    <span class="bb"></span>
    <div id="cc" class="qq">
        <span>1</span>
        <h1>2</h1>
    </div>
    <ul>
        <li>apple</li>
        <li>orange</li>
        <li>strawberry</li>

    </ul>
    <!-- js中dom的常用的重要用法 -->
    <script>
        let ID=document.getElementById("a")
        // 通过ID获取唯一元素，返回单个节点对象
        console.log(ID)
        let TabName=document.getElementsByTagName("p")
        console.log(TabName)
        let ClassName=document.getElementsByClassName("b")
        console.log(ClassName)
        let IDc=document.getElementById("c")
        IDc.innerHTML="<p>那学不学微积分</p>"
         console.log(IDc)
          console.log(IDc.innerHTML)
        IDc.setAttribute("style","background-color:pink")
         console.log(IDc.getAttribute("style"))
         IDc.classList.add("highlight")
         console.log(IDc.className)
          let IDc1=document.createElement("p")
        IDc1.textContent="certainly,我知道学微积分的都是帅哥,美女"
        IDc.append(IDc1)
          let mak = document.querySelector("#aa")
        let make = document.getElementById("cc")
        let ma = document.createElement("p")
        ma.textContent = "7"
        make.insertBefore(ma, document.querySelector('h1'))
        let s = document.getElementsByTagName("ul")
            // for (item of s[0].children) {
            //     item.innerHTML = "tiwi"
            // }
        console.log(s[0].firstElementChild.nextSibling)
        let parent = document.getElementsByTagName("ul");
        let child = document.getElementsByTagName("li");
        parent[0].removeChild(child[1]);
        child[1].remove()
    </script>
</body>
</html>